<template>
<div>
<!--  商品基础分类-->
  <div class="type">
   <div>
     <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">一级分类</div>
     <div ref="baseShop" class="base"></div>
   </div>
    <div>
      <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">数据</div>
      <div ref="baseData" class="baseData"></div>
    </div>
  </div>

  <div class="two-type-cont">
    <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">二级分类</div>
    <div ref="twoData" style="width: 100%;height: 400px" class="two-item"></div>
  </div>
  <div class="three-type-cont">
    <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">三级分类</div>
    <div ref="threeData" style="width: 100%;height: 80%"></div>
  </div>


</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import * as echarts from 'echarts'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  baseData:[],
  baseDataText:[],
  baseDataValue:[],
  twoDataText:[],
  twoDataValue:[],
  threeDataText:[],
  threeDataValue:[],

};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  /**
   * 请求
   */
  getBaseShop(){
    this.$http({
      url: 'product/data/basetype',
      method: 'get'
    }).then((res)=>{

      this.baseData = res.data.list
      this.baseShopData()
      for (let i = 0; i < this.baseData.length; i++) {
        this.baseDataText.push(this.baseData[i].name)
        this.baseDataValue.push(this.baseData[i].value)
      }
      this.baseShopPillar()

    })
  },
  getTwoShop(){
    this.$http({
      url: 'product/data/twotypedata',
      method: 'get'
    }).then((res)=>{
      // console.log(res.data.list)
      let dataList = []
      dataList = res.data.list;
      for (let i = 0; i < dataList.length; i++) {
        this.twoDataText.push(dataList[i].name)
        this.twoDataValue.push(dataList[i].value)
      }
      this.twoShopPilla()


    })
  },
  getTtreeShop(){
    this.$http({
      url: 'product/data/threetypedata',
      method: 'get'
    }).then((res)=>{
      // console.log(res.data.list)
      let threeData = []
      threeData = res.data.list
      for (let i = 0; i < threeData.length; i++) {
        this.threeDataText.push(threeData[i].name)
        this.threeDataValue.push(threeData[i].value)
      }
      this.treeShopPillar()

    })
  },


  /**
   * 样式
   */
  //基础分类扇形图
  baseShopData(){
    echarts.init(this.$refs.baseShop).setOption({
      tooltip: {//提示框组件
        trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      },

      title: {
        text: '',
        left: 'center',
        top: 'center'
      },
      series: [
        {
          type: 'pie',
          data: this.baseData,
          radius: ['40%', '70%']
        }
      ]
    })
  },
  //基础分类柱状图
  baseShopPillar(){
    echarts.init(this.$refs.baseData).setOption({
      tooltip: {
        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        axisPointer: {// 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: {
        data: this.baseDataText
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: this.baseDataValue
        },

      ]
    })
  },
  //***************************二级分类著状图
  twoShopPilla(){
    echarts.init(this.$refs.twoData).setOption({
      tooltip: {
        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        axisPointer: {// 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      color: ["#3398DB"],
      xAxis: {
        data: this.twoDataText,
        type: 'category',

        axisLabel: {
          textStyle: {
            show:true,
            fontFamily:'微软雅黑',
            color: "#3095ff",
            fontSize: '14',
          },
          interval: 0, rotate: 30
        }

      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: this.twoDataValue
        },
      ]
    })
  },
  //**************三级分类横向柱状图
  treeShopPillar(){
    echarts.init(this.$refs.threeData).setOption({
      tooltip: {
        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        axisPointer: {// 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },

      xAxis: {
        type: 'value',

      },
      yAxis: {
        type: 'category',
        data: this.threeDataText
      },
      series: [
        {
          type: 'bar',
          data: this.threeDataValue
        },
      ]
    })
  },



},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getBaseShop()
  this.getTwoShop()
  this.getTtreeShop()

},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
.type{
  display: flex;
  line-height: 0;
  width: 100%;
  height: 300px;
}
.type>div{
  width: 50%;
}
.base{
  width: auto;
  height: 250px;
}
.baseData{
  width: 100%;
  height: 100%;
}
.two-type-cont{
  margin: 0 auto;
  width: 95%;
  height: 500px;

}
.three-type-cont{
  width: 95%;
  height: 4000px;
  margin: 0 auto;
}

</style>
